<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>项目预约</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<style>
  body{
    background-image:url("assets/images/jybg.jpg");
  }
  .title_p{
    text-align: center;
    font: 60px Montserrat;
  }
  .title_p b{
    color: #c69a39;
  }
  .el-card{
    margin-left: 60px;
  }
  .el-card p{
    padding-left: 80px;
  }
</style>
<body>
<div id="app">
  <div>
    <p class="title_p">项目 <b>预约</b></p>
  </div>
  <div style="padding-left: 100px;padding-right: 100px ">
    <el-row gutter="20" >
      <el-col span="8">
        <el-card >
          <img src="assets/images/item1.jpg">
          <p>宠物理疗</p>
        </el-card>
      </el-col>
      <el-col span="8">
        <el-card>
          <img src="assets/images/item2.jpg">
          <p>宠物美容</p>
        </el-card>
      </el-col>
      <el-col span="8" >
        <el-card>
          <img src="assets/images/item3.jpg">
          <p>宠物体检</p>
        </el-card>
      </el-col>
    </el-row>
    <hr>
    <el-row gutter="20">
      <el-col span="8">
        <el-card>
          <img src="assets/images/item4.jpg">
          <p>宠物防疫</p>
        </el-card>
      </el-col>
      <el-col span="8">
        <el-card>
          <img src="assets/images/item5.jpg">
          <p>宠物绝育</p>
        </el-card>
      </el-col>
      <el-col span="8">
        <el-card>
          <img src="assets/images/item6.jpg">
          <p>宠物繁育</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <el-row gutter="10">
    <el-col span="12" style="font-size: 16px;font-family: STFangsong;">
      <p style="font-size: 18px;color: #856404"><b>提供的服务</b></p>
      <p>每日健康检查，可应要求提供医疗服务</p>
      <hr>
      <br>
      <p style="font-size: 18px;color: #856404"><b>猫咪寄养</b></p>
      <p>我们的医疗团队为寄宿的猫提供彻底的护理，由医疗专业人员每天进行两次健康检查，
        根据压力水平和健康状况进行隔离。可应要求提供药物管理和其他额外护理程序</p>
      <hr>
      <p style="font-size: 18px;color: #856404" ><b>寄养需知</b></p>
      <p>入住时间：营业日下午1-5点。退房时间：营业日上午8-11点。<br>
        主人需自带猫粮和猫砂以防止突然换粮和换猫砂引起的肠胃不适及焦虑。<br>
        所有在尊宠动物医院寄养的猫咪们都需要有效期之内的疫苗证明及体外驱虫药。<br>
        所有第一次寄养的猫咪们都需要是本院注册及做过身体健康检查的客人。<br>
        预约时需要支付3天不可退款的定金。(注意：每次至少需要入住3晚)
      </p>
      <hr>
    </el-col>
    <el-col span="12">
      <div>
        <p style="font-size: 20px;font-family: SimSong;color: #856404"><b>寄养登记</b></p>
        <el-form ref="form" :model="form" label-width="80px" >
          <el-form-item label="项目选择">
            <el-select v-model="form.house" placeholder="请选择项目">
              <el-option label="宠物理疗" value="shanghai"></el-option>
              <el-option label="宠物美容" value="beijing"></el-option>
              <el-option label="宠物体检" value="beijing"></el-option>
              <el-option label="宠物防疫" value="beijing"></el-option>
              <el-option label="宠物绝育" value="beijing"></el-option>
              <el-option label="宠物繁育" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宠物种类">
            <el-radio-group v-model="form.type">
              <el-radio label="猫猫"></el-radio>
              <el-radio label="狗狗"></el-radio>
              <el-radio label="其他"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预约时间">
            <el-col :span="12">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col :span="12">
              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="顾客备注" >
            <el-input type="textarea" v-model="form.desc" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item style="padding-left: 400px">
            <el-button type="primary" @click="onSubmit">立即预约</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        form: {
          house: '',
          type: '',
          date1: '',
          date2: '',
          desc: ''
        }
      }
    },
   methods:{
     onSubmit() {
       console.log('submit!');
       alert("提交成功");
     }
   }
  })
</script>
</html>